<template>
  <div class="head">
    <div class="nav">
      <div class="nav-container">
        <span class="logo">直聘</span>
        <ul class="nav-item">
          <li class="home">首页</li>
          <li>
            <router-link to="/Career">职业</router-link>
          </li>
          <li>
            <router-link to="/Enter">公司</router-link>
          </li>
          <li>
            <router-link to="/Search">搜索</router-link>
          </li>
        </ul>
        <div class="resume">
          <router-link to="/Resume">
            简历&nbsp;&nbsp;个人
            <div></div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="search">
      <div class="search-classify">
        <div class="classify">
          职业类型
        </div>
        <input type="text" value="搜素职位、公司">
      </div>
      <p class="text">搜索</p>
    </div>
    <div class="hot">
      <div class="hot-header">
        热门职位:
      </div>
      <ul>
        <li class="first">数据分析师</li>
        <li>数据分析师</li>
        <li>数据分析师</li>
        <li>数据分析师</li>
        <li>数据分析师</li>
        <li>数据分析师</li>
      </ul>
    </div>
  </div>
  <div class="table">
    <div class="text"></div>
    <div class="imgbox">
      <div class="imgbox-left"></div>
      <div class="imgbox-right"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {

    }
  },
}
</script>

<style lang="less">
* {
  font-family: Adobe Heiti Std R;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #F4F5FA;
}

a {
  text-decoration: none;
  background-color: transparent;
}

.head {
  width: 100%;
  height: 300px;

  .nav {
    width: 100%;
    height: 67px;
    background-color: #5c6ac4;

    .nav-container {
      margin: 0 7%;
      height: 100%;

      .logo {
        float: left;
        line-height: 67px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 36px;
        color: #FEFEFE;
      }

      ul {
        display: inline-block;
        margin-left: 155px;

        li {
          float: left;
          list-style: none;
          margin: 0 45px;

          a {
            line-height: 67px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 24px;
            color: #FEFEFE;
          }
        }

        .home {
          font-size: 24px;
          color: #000000;
          line-height: 67px;
          ;
        }
      }

      .resume {
        float: right;

        a {
          line-height: 67px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 24px;
          color: #FEFEFE;
        }

        div {
          margin-top: 10px;
          margin-left: 24px;
          float: right;
          width: 51px;
          height: 46px;
          background: #F2EFEF;
          border-radius: 50%;
          border: 1px solid #F2EFEF;
        }
      }
    }
  }

  .search {
    position: relative;
    width: 71.5%;
    height: 95px;
    background: #5C6AC4;
    border-radius: 30px;
    margin: 0 auto;
    margin-top: 84px;
    padding: 5px 0;


    .search-classify {
      width: 90%;
      height: 85px;
      background: #FEFEFE;
      border-radius: 30px;
      margin-left: 4px;

      .classify {
        width: 182px;
        background: #BBC3F6;
        font-size: 24px;
        color: #000000;
        line-height: 85px;
        text-align: center;
        border-radius: 30px 0 0 30px;

        &:after {
          position: relative;
          top: 25px;
          margin-left: 5px;
          content: '';
          width: 0;
          height: 0;
          border-top: 17px solid #5C6AC4;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 17px solid transparent;
        }
      }

      input {
        position: relative;
        left: 182px;
        top: -85px;
        outline: none;
        width: 85%;
        height: 100%;
        border: 0;
        border-radius: 0px 30px 30px 0px;
        font-size: 24px;
        line-height: 85px;
        color: #ACB6F7;
        text-indent: 32px;
      }


    }

    .text {
      width: 70px;
      position: absolute;
      top: 25px;
      right: 2%;
      font-size: 30px;
      color: #FEFEFE;
      text-align: center;
    }
  }

  .hot {
    position: relative;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    padding-left: 20px;

    .hot-header {
      position: absolute;
      width: 85px;
      color: #9C9A9A;
      font-size: 20px;
    }

    ul {
      position: absolute;
      left: 160px;
      list-style: none;
      height: 26px;

      li {
        float: left;
        color: #5C6AC4;
        font-size: 13.71px;
        margin: 0 30px;
        background: #FFFFFF;
        border-radius: 9px;
        border: 1px solid #FFFFFF;
        width: 80px;
        height: 23px;
        text-align: center;
      }

      .first {
        color: #FFFFFF;
        background-color: #5C6AC4;
      }
    }
  }

}

.table {
  position: relative;
  width: 64.5%;
  margin: 0 auto;
  height: 350px;
  // background-color: red;
  margin-top: 21px;
  padding: 10px 30px 10px 8px;

  .text {
    position: absolute;
    width: 34%;
    height: 94.3%;
    background-color: #fff;
    border-radius: 25px;
  }

  .imgbox {
    position: absolute;
    right: 1%;
    width: 62%;
    height: 92%;
    background-color: #fff;
    border-radius: 12px;
  }
}
</style>
